<template>
  <div style="margin: 10px auto">
    <div class="add-put">
      <el-row>
        <el-col :span="10">
          <el-input style="padding: 10px;margin: auto 10px" v-model="glForm.title" placeholder="请输入攻略标题"></el-input>
        </el-col>
        <el-col :span="12">
          <el-input style="padding: 10px;margin: auto 10px" v-model="glForm.imgPath" placeholder="请输入攻略缩放图">攻略标题
          </el-input>
        </el-col>
        <el-col :span="2">
          <el-button style="margin: 10px 10px" type="primary" @click="addGongLue">发布</el-button>
        </el-col>
      </el-row>
    </div>
    <div id="editor">
      <mavon-editor v-model="glForm.content" style="height: 80%"></mavon-editor>
    </div>
  </div>
</template>
<script>
// Local Registration
import {mavonEditor} from 'mavon-editor'
import 'mavon-editor/dist/css/index.css'

export default {
  name: 'editor',
  components: {
    mavonEditor
    // or 'mavon-editor': mavonEditor
  },
  data() {
    return {
      glForm: {
        title: "",
        glCategoryPid: "1",
        imgPath: "",
        content: "",
        userPid: "",
      },
    }
  },
  methods: {
    addGongLue() {
      // 判断是否登录,没有登录则显示登录组件
      if (!this.$store.getters['catUser/getUser']) {
        this.$message({
          showClose: false,
          message: "请先登录",
          type: "fail",
          duration: 3000,
          onClose: () => {
          },
        });
        return;
      }
      // console.log("glForm.content\t\t" + this.glForm.content)
      let userInfo = JSON.parse(this.$store.getters["catUser/getUser"])
      this.glForm.userPid = userInfo.pid
      this.$axios
        .post("cat/glInfo/save", this.glForm)
        .then((res) => {
          this.$message({
            showClose: false,
            message: "发布成功",
            type: "success",
            duration: 3000,
            onClose: () => {
              this.glForm = null
              this.$router.push("/");
            },
          });
        })
        .catch((err) => {
          return Promise.reject(err);
        });
    }

  }
}
</script>
<style>
.add-put {
}

#editor {
  margin: auto;
  width: 100%;
  height: 580px;
}

.el-row {
  margin-bottom: 5px;
&
:last-child {
  margin-bottom: 0;
}
}
.el-col {
  border-radius: 4px;
}

.bg-purple-dark {
  background: #99a9bf;
}

.bg-purple {
  background: #d3dce6;
}

.bg-purple-light {
  background: #e5e9f2;
}

.grid-content {
  border-radius: 4px;
  min-height: 36px;
}

.row-bg {
  padding: 10px 0;
  background-color: #f9fafc;
}
</style>
